<!--  -->
<template>
  <div class="rating-wrap">
    <div class="ratings">
      <div class="top-wrap">
        <div class="score-wrap">
          <div class="score">{{ seller.score }}</div>
          <div class="desc">综合评分</div>
          <div class="rank">高于周边商家{{ seller.rankRate }}%</div>
        </div>
        <div class="info">
          <div class="foodScore-wrap">
            <span class="foodScore">食物评分</span><v-star :size="36" :score="seller.foodScore" :mr="2"></v-star><span class="sc">{{ seller.foodScore }}</span>
          </div>
          <div class="serviceScore-wrap">
            <span class="serviceScore">服务态度</span><v-star :size="36" :score="seller.serviceScore" :mr="2"></v-star><span class="sc">{{ seller.serviceScore }}</span>
          </div>
          <div class="deliveryTime-wrap">
            <span class="deliveryTime">送达时间</span><span class="minutes">{{ seller.deliveryTime }}分钟</span>
          </div>
        </div>
      </div>
      <split></split>
      <ratingselect :ratings="GoodsRatings" :select-type="selectType" :desc="desc"
      :only-content="onlyContent" @toggleSelected="toggleSelected" @toggleOnlyContent="toggleOnlyContent"></ratingselect>
      <div class="rating-content">
        <ul>
          <li v-for="(item,i) in this.GoodsRatings" :key="i" class="item border-1px"
          v-show="isRatingsShow(item.rateType,item.text)">
            <img class="avatar" :src="item.avatar"/>
            <div class="content">
              <div class="info-wrap">
                <div class="info">
                  <div class="name">{{ item.username }}</div>
                  <v-star :size="24" :score="item.score" :mr="2"></v-star>
                  <div class="deliveryTime" v-if="item.deliveryTime">{{ item.deliveryTime }}分钟送达</div>
                </div>
                <div class="time">{{ item.rateTime | formatDate }}</div>
              </div>
              <div class="comment">
                {{ item.text }}
              </div>
              <div class="evaluate">
                <i class="icon-thumb_up comment-icon" v-if="item.rateType === 0"></i>
                <i class="icon-thumb_down comment-icon" v-else></i>
                <span v-for="(recommend,i) in item.recommend" :key="i" class="recommend">{{ recommend }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import star from "../star/star";
import split from "../split/split";
import ratingselect from "../ratingselect/ratingselect";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      GoodsRatings: [
        {
          username: "3******c",
          rateTime: 1469281964000,
          deliveryTime: 30,
          score: 5,
          rateType: 0,
          text: "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: [
            "南瓜粥",
            "皮蛋瘦肉粥",
            "扁豆焖面",
            "娃娃菜炖豆腐",
            "牛肉馅饼"
          ]
        },
        {
          username: "2******3",
          rateTime: 1469271264000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "服务态度不错",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: ["扁豆焖面"]
        },
        {
          username: "3******b",
          rateTime: 1469261964000,
          score: 3,
          rateType: 1,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "1******c",
          rateTime: 1469261864000,
          deliveryTime: 20,
          score: 5,
          rateType: 0,
          text: "良心店铺",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "2******d",
          rateTime: 1469251264000,
          deliveryTime: 10,
          score: 4,
          rateType: 0,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "9******0",
          rateTime: 1469241964000,
          deliveryTime: 70,
          score: 1,
          rateType: 1,
          text: "送货速度蜗牛一样",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "d******c",
          rateTime: 1469231964000,
          deliveryTime: 30,
          score: 5,
          rateType: 0,
          text: "很喜欢的粥店",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "2******3",
          rateTime: 1469221264000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "量给的还可以",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "3******8",
          rateTime: 1469211964000,
          deliveryTime: "",
          score: 3,
          rateType: 1,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "a******a",
          rateTime: 1469201964000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "孩子喜欢吃这家",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: ["南瓜粥"]
        },
        {
          username: "3******3",
          rateTime: 1469191264000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "粥挺好吃的",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "t******b",
          rateTime: 1469181964000,
          deliveryTime: "",
          score: 3,
          rateType: 1,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "f******c",
          rateTime: 1469171964000,
          deliveryTime: 15,
          score: 5,
          rateType: 0,
          text: "送货速度很快",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "k******3",
          rateTime: 1469161264000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "u******b",
          rateTime: 1469151964000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "下雨天给快递小哥点个赞",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "s******c",
          rateTime: 1469141964000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "好",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "z******3",
          rateTime: 1469131264000,
          deliveryTime: "",
          score: 5,
          rateType: 0,
          text: "吃了还想再吃",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "n******b",
          rateTime: 1469121964000,
          deliveryTime: "",
          score: 3,
          rateType: 1,
          text: "发票开的不对",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "m******c",
          rateTime: 1469111964000,
          deliveryTime: 30,
          score: 5,
          rateType: 0,
          text: "好吃",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "l******3",
          rateTime: 1469101264000,
          deliveryTime: 40,
          score: 5,
          rateType: 0,
          text: "还不错吧",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "3******o",
          rateTime: 1469091964000,
          deliveryTime: "",
          score: 2,
          rateType: 1,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "3******p",
          rateTime: 1469081964000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "很喜欢的粥",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "o******k",
          rateTime: 1469071264000,
          deliveryTime: "",
          score: 5,
          rateType: 0,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        },
        {
          username: "k******b",
          rateTime: 1469061964000,
          deliveryTime: "",
          score: 4,
          rateType: 0,
          text: "",
          avatar:
            "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
          recommend: []
        }
      ],
      showFlag: false,
      desc: {
        all: "全部",
        positive: "满意",
        negetive: "不满意"
      },
      onlyContent: true,
      selectType: 2
    };
  },
  methods: {
    // getRatings() {
    //   this.$http.get("/api/ratings").then(result => {
    //     if (result.status === 200) {
    //       this.GoodsRatings = result.body.data;
    //       this.$nextTick(() => {
    //         this._initScroll();
    //       });
    //     }
    //   });
    // },
    _initScroll() {
      this.ratingscroll = new BScroll(".rating-wrap", {
        click: true
      });
    },
    // 提供给ratingselect组件，改变selectType的值
    toggleSelected(type) {
      this.selectType = type;
    },
    // 提供给ratingselect组件，改变onlyContent的值
    toggleOnlyContent() {
      this.onlyContent = !this.onlyContent;
    },
    // 判断评论条目是否显示
    isRatingsShow(rateType, text) {
      if (this.onlyContent && text.length === 0) {
        return false;
      }
      if (rateType === this.selectType || this.selectType === 2) {
        return true;
      }
    }
  },
  props: ["seller"],
  created() {
    // this.getRatings();
    this.$nextTick(() => {
      this._initScroll();
    });
  },
  components: {
    "v-star": star,
    split,
    ratingselect
  }
};
</script>
<style lang='less' scoped>
@import "../../common/css/common.less";
.rating-wrap {
  position: absolute;
  top: 174px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  margin-bottom: 46px;
  .ratings {
    .top-wrap {
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding: 18px 24px;
      @media only screen and (max-width: 320px) {
        padding: 18px 2px;
      }
      .score-wrap {
        padding-bottom: 6px;
        @media only screen and (max-width: 320px) {
          flex: 1;
        }
        .score {
          .font-style(24px,28px);
          color: rgb(255, 153, 0);
          margin-bottom: 6px;
        }
        .desc {
          .font-style(12px,12px);
          color: rgb(7, 17, 27);
          margin-bottom: 8px;
        }
        .rank {
          .font-style(10px,10px);
          color: rgb(147, 153, 159);
        }
      }
      .info {
        border-left: 1px solid rgba(147, 153, 159, 0.2);
        padding-left: 24px;
        text-align: left;
        @media only screen and (max-width: 320px) {
          padding-left: 6px;
        }
        .star {
          .star-item {
            margin-right: 0;
          }
        }
        .foodScore-wrap,
        .serviceScore-wrap {
          margin-bottom: 8px;
          .foodScore,
          .serviceScore {
            margin-right: 12px;
            .font-style(12px,18px);
            color: rgb(7, 17, 27);
          }
          .sc {
            margin-left: 12px;
            .font-style(12px,18px);
            color: rgb(255, 153, 0);
          }
        }
        .deliveryTime-wrap {
          display: inline-block;
          .deliveryTime {
            .font-style(12px,18px);
            margin-right: 12px;
          }
          .minutes {
            .font-style(12px,18px);
            color: rgb(147, 153, 159);
          }
        }
      }
    }
    .rating-content {
      margin: 0 18px;
      .item {
        display: flex;
        padding: 18px 0;
        .border-1px();
        .avatar {
          margin-right: 12px;
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
        .content {
          width: 100%;
          .info-wrap {
            flex: 1;
            display: flex;
            justify-content: space-between;
            .info {
              .name {
                .font-style(10px,12px);
                color: rgb(7, 17, 27);
              }
              .deliveryTime {
                display: inline-block;
                .font-style(10px,12px,200);
                color: rgb(147, 153, 159);
              }
            }
            .time {
              .font-style(10px,12px,200);
              color: rgb(147, 153, 159);
            }
          }
          .comment {
            margin-top: 6px;
            .font-style(12px,16px);
            color: rgb(7, 17, 27);
          }
          .evaluate {
            margin-top: 8px;
            font-size: 0;
            .comment-icon {
              margin-right: 8px;
              .font-style(12px,16px);
              &.icon-thumb_down {
                color: rgb(147, 153, 159);
              }
              &.icon-thumb_up {
                color: rgb(0, 160, 220);
              }
            }
            .recommend {
              display: inline-block;
              padding: 0 6px;
              margin: 0 8px 4px 0;
              .font-style(12px,16px);
              color: rgb(147, 153, 159);
              border: 1px solid rgba(7, 17, 27, 0.1);
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
}
</style>